// components/gooodsItem/index.js
Component({
	/**
	 * 组件的属性列表
	 */
	properties: {
		col: {
      type: Number,
      value: 2,
    },
		imgGap: {
      type: Number,
      value: 5,
    },
		shujuAll:{
			type:Array,
			value:[]
		}
	},

	/**
	 * 组件的初始数据
	 */
	data: {
		srcAll:[],//所有商品的数据
		sumHeight:[0,0],//各列的高度
		positionAll:[],//各个节点绝对定位的值
		num:0,//总图片的数量
		oldNum:0,//上一次图片的数量
		itemWidth:"120",//节点固定的宽度
		allHeight:[],//存放节点的高度
		height:0,//记录瀑布流总高度
		more:[]//是否显示更多
	},

	observers:{//监听数据
		"shujuAll":function(val){
			let srcAll=this.data.srcAll
			srcAll.push.apply(srcAll, val)
			let LEN=srcAll.length
			const arr = new Array(LEN).fill(false);//创建一个长度为“LEN”默认值为false的数组
			this.setData({
				srcAll,
				more:arr
			})
		},
		"col,imgGap":function(col,imgGap){
			let a1=750 - (col+1) * imgGap
			let a2=a1/col
			console.log(a1,a2);
			this.setData({
				itemWidth:a2
			})
		}
	},
	/**
	 * 组件的方法列表
	 */
	methods: {
		loadImgFinish(e){
			let that = this
      let index = e.currentTarget.dataset.index
      let dom = wx.createSelectorQuery().in(this)
      //获取所有图片容器的节点信息
      dom.select("#srcAll-" + index).fields({ size: true },(res) => {
        that.setData({
          num: that.data.num + 1,
          ['srcAll[' + index + '].show']: false,    // 这边事先把所有图片隐藏，用于后面做懒加载的效果
          ['allHeight[' + index + ']']: res.height,//存储所有节点的高度
        })
        if(that.data.num == that.data.srcAll.length){
          for(let i = that.data.oldNum; i < that.data.num; i++){
            const getSortMsg = () => {
              // 记录各列高度的数据进行重新排序
							let arr1=[]
							that.data.sumHeight.forEach(v => {
								arr1.push(v)
							});
              let sumHeight = arr1.sort((a, b) => a - b)
              return {
                'shortestHeight': sumHeight[0],//获取各列中高度最小的值
                'longestHeight': sumHeight[that.data.col - 1],//获取各列中高度最大的值
                'shortestIndex': that.data.sumHeight.indexOf(sumHeight[0]),//获取各列中高度最小的值在sumHeight中的下标值
                'longestIndex':  that.data.sumHeight.indexOf(sumHeight[that.data.col - 1])//获取各列中高度最大的值在sumHeight中的下标值
              }
            }
            const { shortestHeight,shortestIndex } = getSortMsg()
            that.setData({
              ['positionAll[' + i + ']']: {
                top: shortestHeight + that.data.imgGap,
                left: (that.data.itemWidth * shortestIndex) + that.data.imgGap * ( shortestIndex + 1 )
              },
              ['sumHeight[' + shortestIndex + ']']: that.data.sumHeight[shortestIndex] + that.data.allHeight[i] + that.data.imgGap
            })
            // 瀑布流懒加载
            that.createIntersectionObserver().relativeToViewport({ bottom: 50 }).observe('#srcAll-' + i ,(res) => {
              if(res.intersectionRatio  > 0){
                that.setData({
                  ['srcAll[' + i + '].show']: true
                })
              }
            })
          }
          that.setData({
            'oldNum': that.data.num,
            'height': Math.max.apply(null,that.data.sumHeight) + that.data.imgGap
          })
          // 瀑布流加载完成后，通知父组件加载完毕
          that.triggerEvent('waterFallResh', { loading: true })
        }
      }).exec()
		},
		more(e){
			let index=e.currentTarget.dataset.index
			let more=this.data.more
			more.forEach((v,i)=>{
				if(i==index){
					more[i]=true
				}else{
					more[i]=false
				}
			})
			console.log(more);
			this.setData({
				more
			})
		},
		off(e){
			let index=e.currentTarget.dataset.index
			let more=this.data.more
			more[index]=false
			this.setData({
				more
			})
		}

	},
	lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  }
})
